<template>
    <h1>{{ countStore.sum }}</h1>
    <button @click="countStore.increment(1)">+</button>
    <button @click="countStore.decrement(1)">-</button>
    <ul>
        <li v-for="item in talkList" :key="item.id">{{ item.content }}</li>
    </ul>
    <h1>{{ bigCount }}</h1>
    <h1>{{ firstTalk }}</h1>
</template>


<script setup lang="ts" name="PiniaInfo">
import { useCountStore } from '@/store/count'
import { useTalkStore } from '@/store/talk';
import { storeToRefs } from 'pinia';

// 调用xxxstore获取对应store
const countStore = useCountStore()
const talkStore = useTalkStore()

// 解构store中的state
const { talkList,bigCount,firstTalk } = storeToRefs(talkStore)

// store监听state
countStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
})
</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>